<template>
  <div class="box" style="background-color: #f5f5f5; width: 100%; margin: 0 auto">
    <!-- 1 -->
    <swipers></swipers>
    <!-- 2 -->
    <el-row class="Introduction">
      <h1 class="js-title" style="
          margin-top: 80px;
          margin-bottom: 30px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          font-size: 36px;
          color: #383f58;
          line-height: 52px;
          font-style: normal;
        ">
        公司介绍
      </h1>
    </el-row>
    <div style="width: 90%; max-width: 980px; margin: 0 auto">
      <!-- 调整宽度为相对宽度并设置最大宽度，增强自适应 -->
      <el-row :gutter="30" class="row">
        <div class="inp-box" style="
            width: 100%;
            height: 324px;
            background: #ffffff;
            border-radius: 10px;
            margin-bottom: 80px;
            margin: 0 auto;
          ">
          <input class="inp" type="text" style="width: 100%; height: 50px; border: 0px; outline: none"
            placeholder="成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务，将人工智能技术应用于各个行业。" />
        </div>
      </el-row>
    </div>
    <!-- 3 -->
    <el-row class="Introduction">
      <h1 class="js-title" style="
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          font-size: 36px;
          color: #383f58;
          line-height: 52px;
          font-style: normal;
          margin-bottom: 20px;
        ">
        我们的历程
      </h1>
      <p style="font-size: 14px; margin-bottom: 60px">
        成为世界领先的AI企业，推动科技进步和社会发展
      </p>
    </el-row>
    <div class="" style="width: 90%; max-width: 1000px; margin: 0 auto">
      <!-- 同样调整宽度为相对宽度并设置最大宽度 -->
      <el-row class="row" style="margin-right: 10px">
        <el-col :sm="24" :md="24" :lg="24">
          <div style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 60px;
            " class="a">
            <!-- 让内部元素能更好地换行排列 -->
            <div style="width: 100%; height: auto; border-radius: 10px" class="a1">
              <img src="../assets/indexImg2.png" style="width: 100%; height: 100%; border-radius: 10px" alt="" />
            </div>
            <div style="width: 100%; height: auto; margin-left: 10px" class="a2">
              <div style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                ">
                <div>
                  <img src="../assets/logo.png" width="50px " height="50px" alt="" />
                </div>
                <h4>01</h4>
              </div>
              <h3 style="font-size: 16px; text-align: left; margin-bottom: 10px">
                校办/教职工会议
              </h3>
              <p style="
                  font-weight: 400;
                  font-size: 12px;
                  color: #798099;
                  line-height: 17px;
                  text-align: left;
                ">
                成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
              </p>
            </div>
          </div>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24">
          <div style="display: flex; justify-content: space-between" class="b">
            <div style="width: 100%; height: auto; margin-top: 20px" class="b1">
              <div class="icon" style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                ">
                <h4>01</h4>
                <div>
                  <img src="../assets/logo.png" width="50px " height="50px" alt="" />
                </div>
              </div>
              <h3 style="font-size: 16px; text-align: right; margin-bottom: 10px">
                校办/教职工会议
              </h3>
              <p style="
                  font-weight: 400;
                  font-size: 12px;
                  color: #798099;
                  line-height: 17px;
                  text-align: right;
                ">
                成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
              </p>
            </div>
            <div style="
                width: 100%;
                height: auto;
                margin-left: 10px;
                margin-top: 20px;
              " class="b2">
              <img src="../assets/indexImg2.png" style="width: 100%; height: 100%; border-radius: 10px" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24">
          <div style="display: flex; margin-bottom: 60px" class="c">
            <div style="width: 100%; height: auto; border-radius: 10px" class="c1">
              <img src="../assets/indexImg2.png" style="width: 100%; height: 100%; border-radius: 10px" alt="" />
            </div>
            <div style="width: 100%; height: auto; margin-left: 10px" class="c2">
              <div style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                ">
                <div>
                  <img src="../assets/logo.png" width="50px " height="50px" alt="" />
                </div>
                <h4>01</h4>
              </div>
              <h3 style="font-size: 16px; text-align: left; margin-bottom: 10px">
                校办/教职工会议
              </h3>
              <p style="
                  font-weight: 400;
                  font-size: 12px;
                  color: #798099;
                  line-height: 17px;
                  text-align: left;
                ">
                成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
              </p>
            </div>
          </div>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24">
          <div style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;
            " class="d">
            <div style="width: 100%; height: auto; margin-top: 20px" class="d1">
              <div class="icon" style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                ">
                <h4>01</h4>
                <div>
                  <img src="../assets/logo.png" width="50px " height="50px" alt="" />
                </div>
              </div>
              <h3 style="font-size: 16px; text-align: right; margin-bottom: 10px">
                校办/教职工会议
              </h3>
              <p style="
                  font-weight: 400;
                  font-size: 12px;
                  color: #798099;
                  line-height: 17px;
                  text-align: right;
                ">
                成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
              </p>
            </div>
            <div style="
                width: 100%;
                height: auto;
                margin-left: 10px;
                margin-top: 20px;
              " class="d2">
              <img src="../assets/indexImg2.png" style="width: 100%; height: 100%; border-radius: 10px" alt="" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.row {
  text-align: center;
}

.el-row {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.a,
.c {
  margin-bottom: 0 !important;
}

.b {
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .inp {
    width: 90% !important;
    padding: 0 !important;
  }

  .a,
  .b,
  .c,
  .d {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }

  .a1,
  .b2,
  .c1,
  .d2 {
    width: 100% !important;
    margin-top: 140px;
  }

  .b {
    margin-bottom: 20px;
  }

  .a1,
  .c1 {
    margin-top: 160px;
  }

  .a2,
  .b1,
  .c2,
  .d1 {
    width: 100% !important;
    justify-content: space-between;
    margin-left: 0 !important;
  }

  .a2 {
    position: absolute;
    top: 0;
  }

  .c2 {
    position: absolute;
    /* top: 1000px; */
  }

  .icon {
    position: relative;
  }

  .icon h4 {
    position: absolute;
    right: 0;
  }

  .icon div {
    position: absolute;
    left: 0;
  }

  .b1 h3,
  .d1 h3 {
    text-align: left !important;
    margin-top: 60px !important;
  }

  .b1 p {
    position: relative;
    top: auto;
    text-align: left !important;
  }

  .d1 p {
    position: relative;
    top: auto;
    text-align: left !important;
  }
}

@media screen and(max-width:460px) {
  .box {
    width: 460px !important;
  }
}
</style>
<script>
import swipers from "@/components/swiperImg.vue";
import { getabout } from '../../request/api/all'
export default {
  components: {
    swipers,
  },
  data() {
    return {
      aboutData: []
    };
  },
  // methods: {
  //   async getAbout() {
  //     let res = await getabout()
  //     this.aboutData = res.data.data
  //     console.log('res', this.aboutData);
  //   }
  // },
  // mounted() {
  //   this.getAbout()
  // }
};
</script>